<template>
  <view class="contain">
    <view class="more">
      <view class="titleleft">
        {{ themeTitle }}
      </view>
      <view class="titleright" @click="showAlls">
        <view>全部</view>
        <view>
          <u-icon name="arrow-right" color="#999" size="30"></u-icon>
        </view>
      </view>
    </view>
    <!-- <u-section :title="themeTitle" sub-title="全部"  :show-line="false" font-size="32" sub-color="#333" @click="showAlls" class="themTitle"></u-section> -->

    <view class="card">
      <u-card
        @click="jumpTodetail(item.id, index)"
        v-for="(item, index) in themeList"
        :key="index"
        padding="0"
        margin="0"
        :foot-border-top="false"
        :head-border-bottom="false"
        :border="false"
        :body-style="bodyStyle"
      >
        <view slot="body">
          <view
            class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0"
          >
            <image
              :src="item.image != '[]' ? JSON.parse(item.image)[0].url : ''"
              mode="aspectFill"
            >
            </image>

            <!-- <image :src="getImgCache(JSON.parse(item.image)[0].uid,JSON.parse(item.image)[0].url)"></image>   -->

            <view class="info">
              <view class="info_title">{{ item.serverName }}</view>
              <view class="sub_title">{{ item.serverInstruction }}</view>
              <view class="info-bottom">
                <view class="bottom-left">
                  <view class="icon-box">
                    <u-image
                      width="100%"
                      height="100%"
                      src="@/static/homeicon/indexicon.png"
                      class="iconImg"
                    >
                    </u-image>
                  </view>

                  <!-- <u-icon name="eye" color="#B3B3B3" size="30"></u-icon> --><!--enterprise_name-->
                  <view class="companyInfo" style="color: #b3b3b3">
                    {{ item.supplierDate ? item.supplierDate.shopName : "" }}
                  </view>
                </view>
                <view class="bottom-right">
                  <text class="newPrice"
                    >￥{{ Number(item.price).toFixed(2) }}</text
                  >
                  <!-- <text class="oldPrice">{{ Number(item.price) * 2 }}</text> -->
                </view>
                <!-- <view class="number">
									<u-icon name="eye" color="#B3B3B3" size="30"></u-icon>
									<text >{{item.viewNumber}}</text>
								</view>	 -->
              </view>
            </view>
          </view>
        </view>
      </u-card>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // themeList: {
    // 	type: Array
    // },
    themeTitle: {
      type: String,
      default: "精选服务",
    },
    pageLevel: {
      type: String,
      default: "two",
    },
    fromType: {
      type: String,
      default: "2",
    },
    listQuery: {
      type: Object,
      default: () => ({
        currentPage: 1,
        pageSize: 10,
        tree: false,
        status: 2,
      }),
    },
  },
  data() {
    return {
      dataList: [
        {
          title: "默认测试数据公司注册企业注册服务",
          sub_title: "公司注册最快3天可得，送三个章",
          oldPrice: "￥60",
          newPrice: "￥49.9",
          number: "145678",
          imgUrl: "../../static/img/001.png",
        },
      ],
      testImg:
        "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-model/9c7c3add-9986-4e71-8352-06a9fdd6b540.png",
      selectedQuery: {},
      themeList: [],
      viewNumber: 0,
      // themeList:[],
      bodyStyle: {
        margin: 0,
      },
    };
  },

  mounted() {
    this.selectedQuery = this.listQuery;
    this.selectedService();
    this.getInfo();
  },

  watch: {
    listQuery: {
      immediate: true,
      deep: true,
      handler(n, o) {
        this.selectedQuery = n;

        if (this.selectedQuery.currentPage != 1) {
          this.selectedService();
        } else {
          if (this.selectedQuery.isrefresh) {
            this.themeList = [];
            this.selectedService();
          }
        }
      },
    },
  },

  methods: {
    //  image_cache(image_url,image_name,call_back) {

    // 		uni.getStorage({
    // 			key: image_name,
    // 			success:function(res){
    // 				call_back(null,res.data)
    // 			},
    // 			fail:function(res){
    // 				// 本地没有缓存 需要下载
    // 				uni.downloadFile({
    // 					url: image_url,
    // 					success: (res) => {
    // 						if (res.statusCode === 200) {
    // 							call_back(res.data)
    // 							uni.setStorage({
    // 								key:image_name,
    // 								data:res,
    // 								success:function(){

    // 								}
    // 							})
    // 						}
    // 					}
    // 				});
    // 			}
    // 		})
    // 	},

    // check 缓存  + '?x-oss-process=image/resize,l_200'
    getImgCache(img_name, url) {
      let img_url = url;

      try {
        const cached = uni.getStorageSync(img_name);
        if (cached) {
          console.log("已缓存为***" + cached);
          return cached;
        } else {
          console.log("未缓存，延迟下载");
          setTimeout(() => {
            uni
              .downloadFile({
                url: img_url,
              })
              .then((res) => {
                if (res[1].statusCode == 200) {
                  uni.saveFile({
                    tempFilePath: res[1].tempFilePath,
                    success: function (res) {
                      console.log("下载完成" + res.savedFilePath);
                      uni.setStorageSync(img_name, res.savedFilePath);
                    },
                  });
                } else {
                  return Promise.reject("下载临时文件失败");
                }
              })
              .catch((info) => {
                console.log(info);
              });
          }, 1000);
          return img_url;
        }
      } catch (e) {
        console.log(e);
      }
    },

    getInfo() {
      var uid = "vc-upload-1600741341475-70";
      var image =
        "https://eqiatong-public.oss-cn-beijing.aliyuncs.com/2020-09/22/b31909879c204b129bc21c3b20dcb534%E5%85%AC%E5%8F%B8%E6%A0%B8%E5%90%8D%E6%B3%A8%E5%86%8C%E7%A8%8E%E5%8A%A1%E6%A0%B8%E7%A8%8E%E9%93%B6%E8%A1%8C%E5%BC%80%E6%88%B7%E5%85%A8%E5%8C%85%E4%B8%93%E6%B3%A8%E4%BC%81%E4%B8%9A%E4%B8%80%E7%AB%99%E5%BC%8F%E6%9C%8D%E5%8A%A1.jpg";
    },
    // 精选服务

    selectedService() {
      this.$http
        .get("/api/server/list", { params: this.selectedQuery })
        .then((res) => {
          if (res.data.data.servers.length > 0) {
            // 存储图片 循环
            var data = res.data.data.servers;
            this.themeList = this.themeList.concat(res.data.data.servers);
          } else {
            this.$emit("childFn", "stopFresh");
          }
        });
    },

    showAlls() {
      uni.switchTab({
        url:
          this.pageLevel == "one"
            ? "../../pages/service/service"
            : "../../../pages/service/service",
      });
    },
    jumpTodetail(value, index) {
      this.themeList[index].viewNumber++;
      uni.navigateTo({
        url:
          this.pageLevel == "one"
            ? "../../pageTwo/productDetails/index?id=" +
              value +
              "&fromType=" +
              this.fromType
            : "../../../pageTwo/productDetails/index?id=" +
              value +
              "&fromType=" +
              this.fromType,
      });

      //  footerservice + 1
      // this.countView(value)
    },
    countView(value) {
      this.myId = uni.getStorageSync("userId")
        ? uni.getStorageSync("userId")
        : "";
      this.$http
        .post("/api/serverInc", {
          userId: this.myId,
          serverId: value,
        })
        .then((res) => {
          console.log("res", res.data.data);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.contain {
  .card {
    margin-top: 22rpx;
    /deep/ .u-card {
      box-sizing: border-box;
      // margin-left: 30rpx!important;
      // margin-right: 30rpx!important;
      // padding-left: 24rpx!important;
    }
    .u-body-item image {
      width: 150rpx;
      flex: 0 0 150rpx;
      height: 150rpx;
      margin-left: 30rpx;
      border-radius: 16rpx;
    }
    .info {
      flex: 1;
      // margin-left:rpx;

      padding: 28rpx;
      // margin-right: 30rpx;
      box-sizing: border-box;
      .info_title {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
        // margin-bottom: 8rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .sub_title {
        font-size: 26rpx;
        color: #999;
        margin-bottom: 14rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        // overflow: hidden;
        // white-space: normal;
        // word-break: break-all;
        // text-overflow: ellipsis;

        margin: 16rpx 0;
      }

      .info-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .bottom-left {
          display: flex;
          // justify-content: space-between;
          // align-items: center;
          .icon-box {
            width: 34rpx;
            height: 30rpx;
            margin-right: 10rpx;
            .iconImg {
              // width: 100%;
              // height: 100%;
              margin-top: 4rpx;
            }
          }
        }
        .bottom-right {
          // padding-right: 10rpx;

          .newPrice {
            color: #ff3b30;
            font-size: 36rpx;
            font-weight: 400;
            margin-right: 14rpx;
          }
          .oldPrice {
            color: #b3b3b3;
            font-size: 22rpx;
            text-decoration: line-through;
          }
        }
      }

      .number {
        float: right;
        color: #b3b3b3;
        margin-right: 20rpx;
        font-size: 24rpx;
        margin-top: 12rpx;
        /deep/ .uicon-eye.u-iconfont {
          top: 0px;
        }
      }
    }
  }
  .more {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-left: 30rpx;
    padding-right: 30rpx;
    .titleleft {
      font-size: 16px;
      font-weight: 600;
    }
    .titleright {
      display: flex;
      align-items: center;
      text-align: center;
    }
  }

  .companyInfo {
    // width: 100rpx;
    // overflow: hidden;
    // text-overflow:ellipsis;
    // white-space: nowrap
  }
}
</style>
